<template>
    <view class="container">
        <view class="list-header">
            <view class="index-search-box dis-flex" style="position: static">
                <!-- <navigator class="index-search flex-box" hover-class="none" openType="navigate" url="../search/index"> -->
                <view class="index-search flex-box" @tap.stop.prevent="triggerSearch">
                    <view class="index-cont-search">
                        <icon class="text-center" size="15" type="search"></icon>
                        <text>{{ option.search ? option.search : '搜索商品' }}</text>
                    </view>
                </view>
                <!-- </navigator> -->
                <view @tap="onChangeShowState" class="list-right f-28">
                    <text class="iconfont icon-tubiao_kuaizhuangpailie" v-if="showView"></text>
                    <text class="iconfont icon-tubiao_liebiaopailie" v-else></text>
                </view>
            </view>
            <view class="store_nav_cont dis-flex b-f b-b">
                <view @tap="switchSortType" data-type="all" class="flex-box t-c p-r" data-index="0 " :id="'list-' + (sortType === 'all' ? true : 0)">
                    <text>综合</text>
                </view>
                <view @tap="switchSortType" data-type="sales" class="flex-box t-c p-r" data-index="1" :id="'list-' + (sortType === 'sales' ? true : 0)">
                    <text>销量</text>
                </view>
                <view @tap="switchSortType" data-type="price" class="dis-flex flex-x-center flex-box t-c p-r" data-index="2" :id="'list-' + (sortType === 'price' ? true : 0)">
                    <text class="price__text">价格</text>
                    <view class="price__arrow dis-flex flex-dir-column flex-x-center flex-y-center">
                        <text :class="'iconfont icon-arrow-top ' + (sortPrice ? 'active' : '')"></text>
                        <text :class="'iconfont icon-arrow-bottom ' + (sortPrice ? '' : 'active')"></text>
                    </view>
                </view>

                <!-- <view bindtap="toSynthesize" class="flex-box t-c p-r" data-index="sort_order" id="list-0">
        <text>筛选 </text>
        <text class="f-22 iconfont icon-shaixuan col-7" style="padding-left:2rpx"></text>
      </view> -->
            </view>
            <scroll-view
                @scrolltolower="bindDownLoad"
                class="weui-panel weui-panel_access"
                :scroll-y="true"
                :style="'height: ' + scrollHeight + 'px; width: 750rpx;'"
                v-if="list.data.length > 0"
            >
                <view class="new">
                    <view :class="'category-list ' + arrange">
                        <navigator class="list b-f" hover-class="none" :url="'../goods/index?item_id=' + item.goods_id" v-for="(item, index) in list.data" :key="index">
                            <view class="left">
                                <view class="img">
                                    <image class="goodsImg" mode="scaleToFill" :src="item.image[0].file_path"></image>
                                </view>
                            </view>

                            <view class="right">
                                <view class="cont">
                                    <text class="f-30 title twolist-hidden m-top10">{{ item.goods_name }}</text>
                                    <view class="price f-34 col-m m-top10">
                                        ￥{{ item.sku[0].shop_price }}
                                        <text class="del f-22" v-if="item.market_price > 0">{{ item.market_price }}</text>
                                    </view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                </view>
                <view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
            </scroll-view>
        </view>

        <view v-if="!noList && !list.data.length" class="yoshop-notcont" style="margin-top: 130px">
            <view class="img">
                <image mode="aspectFit" src="/static/images/no_content.png"></image>
            </view>
            <text class="cont">亲, 没有相关内容</text>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            scrollHeight: null,
            showView: false,
            arrange: '',
            sortType: 'all',
            // 排序类型
            sortPrice: false,
            // 价格从低到高

            option: {
                search: false
            },
            list: {
                data: ''
            },
            noList: true,
            no_more: false,
            page: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (option) {
        let that = this;

        // 设置商品列表高度
        that.setListHeight();

        // 记录option
        that.setData(
            {
                option
            },
            function () {
                // 获取商品列表
                that.getGoodsList(true);
            }
        );
    },
    /**
     * 设置分享内容
     */
    onShareAppMessage: function () {
        return {
            title: '全部分类',
            desc: '',
            path: '/pages/category/index?' + params
        };
    },
    methods: {
        /**
         * 获取商品列表
         */
        getGoodsList: function (is_super, page) {
            let that = this;
            app.globalData._get(
                'item/lists',
                {
                    page: page || 1,
                    sortType: this.sortType,
                    sortPrice: this.sortPrice ? 1 : 0,
                    category_id: this.option.category_id || 0,
                    search: this.option.search || ''
                },
                function (result) {
                    let resultList = result.data.list;
                    let dataList = that.list;
                    if (is_super === true || typeof dataList.data === 'undefined') {
                        // typeof dataList.data === 'undefined'
                        that.setData({
                            list: resultList,
                            noList: false
                        });
                    } else {
                        that.setData({
                            'list.data': dataList.data.concat(resultList.data)
                        });
                    }
                }
            );
        },

        /**
         * 设置商品列表高度
         */
        setListHeight: function () {
            let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    that.setData({
                        scrollHeight: res.windowHeight - 90
                    });
                }
            });
        },

        /**
         * 切换排序方式
         */
        switchSortType: function (e) {
            let that = this;
            let newSortType = e.currentTarget.dataset.type;
            let newSortPrice = newSortType === 'price' ? !this.sortPrice : true;
            this.setData(
                {
                    list: {},
                    page: 1,
                    sortType: newSortType,
                    sortPrice: newSortPrice
                },
                function () {
                    // 获取商品列表
                    that.getGoodsList(true);
                }
            );
        },

        /**
         * 跳转筛选
         */
        // toSynthesize: function (t) {
        //   wx.navigateTo({
        //     url: "../category/screen?objectId="
        //   });
        // },

        /**
         * 切换列表显示方式
         */
        onChangeShowState: function () {
            let that = this;
            that.setData({
                showView: !that.showView,
                arrange: that.arrange ? '' : 'arrange'
            });
        },

        /**
         * 下拉到底加载数据
         */
        bindDownLoad: function () {
            // 已经是最后一页
            if (this.page >= this.list.last_page) {
                this.setData({
                    no_more: true
                });
                return false;
            }
            this.getGoodsList(false, ++this.page);
        },

        /**
         * 商品搜索
         */
        triggerSearch: function () {
            let pages = getCurrentPages();
            // 判断来源页面
            if (pages.length > 1 && pages[pages.length - 2].route === 'pages/search/index') {
                uni.navigateBack();
                return;
            }
            // 跳转到商品搜索
            uni.navigateTo({
                url: '../search/index'
            });
        }
    }
};
</script>
<style>
@import './list.css';
</style>
